﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui.css-H.js</title>
    <link rel="stylesheet" type="text/css" href="../../../css/Hui.css" />
    <style type="text/css">
    </style>
</head>
<body>
    <!--############## 示例一 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例一</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-list H-background-white">
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 示例二 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例二</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-list H-background-white">
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-three"><img src="../../../image/logo.png" alt="" title="" /></div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 示例三 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例三</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-list H-background-white">
        <div class="H-picture-item H-picture-row-two"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-two"><img src="../../../image/logo.png" alt="" title="" /></div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 示例四 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例四</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-list H-background-white">
        <div class="H-picture-item H-picture-row-two"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-two"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-two"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-two"><img src="../../../image/logo.png" alt="" title="" /></div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 示例五 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例五</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-list H-background-white">
        <div class="H-picture-item H-picture-row-four"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-four"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-four"><img src="../../../image/logo.png" alt="" title="" /></div>
        <div class="H-picture-item H-picture-row-four"><img src="../../../image/logo.png" alt="" title="" /></div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 示例六 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例六</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-list H-background-white">
        <div class="H-picture-item H-picture-row-two">
            <img src="../../../image/logo.png" alt="" title="" />
            <p class="H-vertical-padding10">图片名称</p>
        </div>
        <div class="H-picture-item H-picture-row-two">
            <img src="../../../image/logo.png" alt="" title="" />
            <p class="H-vertical-padding10">图片名称</p>
        </div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 示例七 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例七</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-waterfall H-padding10 H-background-white">
        <div class="H-picture-waterfall-item"><div class="H-waterfall-content"><img src="../../../image/logo.png" alt="" title="" /></div></div>
        <div class="H-picture-waterfall-item">
            <div class="H-waterfall-content"><img src="../../../image/logo4.png" alt="" title="" /></div>
        </div>
        <div class="H-picture-waterfall-item">
            <div class="H-waterfall-content"><img src="../../../image/logo5.png" alt="" title="" /></div>
        </div>
        <div class="H-picture-waterfall-item">
            <div class="H-waterfall-content"><img src="../../../image/logo2.png" alt="" title="" /></div>
        </div>
        <div class="H-picture-waterfall-item">
            <div class="H-waterfall-content"><img src="../../../image/Hui.png" alt="" title="" /></div>
        </div>
        <div class="H-picture-waterfall-item">
            <div class="H-waterfall-content"><img src="../../../image/logo3.png" alt="" title="" /></div>
        </div>
    </div>

    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 示例八 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">示例八</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-picture-waterfall H-padding10">
        <div class="H-picture-waterfall-item"><img src="../../../image/logo.png" alt="" title="" /><p class="H-vertical-padding10  H-background-white">图片名称</p></div>
        <div class="H-picture-waterfall-item"><img src="../../../image/logo4.png" alt="" title="" /><p class="H-vertical-padding10  H-background-white">图片名称</p></div>
        <div class="H-picture-waterfall-item"><img src="../../../image/logo5.png" alt="" title="" /><p class="H-vertical-padding10  H-background-white">图片名称</p></div>
        <div class="H-picture-waterfall-item"><img src="../../../image/logo2.png" alt="" title="" /><p class="H-vertical-padding10  H-background-white">图片名称</p></div>
        <div class="H-picture-waterfall-item"><img src="../../../image/Hui.png" alt="" title="" /><p class="H-vertical-padding10  H-background-white">图片名称</p></div>
        <div class="H-picture-waterfall-item"><img src="../../../image/logo3.png" alt="" title="" /><p class="H-vertical-padding10  H-background-white">图片名称</p></div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <script type="text/javascript" src="../../../script/Hui.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            Hui.waterfall(".H-picture-waterfall");
        };
    </script>
</body>
</html>